<template>
    <div class="menu">
        <div class="menu-content">
            <img src="../assets/img/image11.jpg" alt="" srcset="">
            <ul>
                <!--   @mouseleave="handleMouseOut" -->
                <li v-for="(item, index) in navList" :key="index" @mouseover="handleMouseOver(item as NavItem)"
                    @mouseleave="handleMouseOut" :class="index === 3 ? 'aaaa' : ''">
                    <router-link :to="item.href">{{ item.title }}</router-link>
                    <ul v-show="hoverClass == item && item.children?.length" class="animate__animated animate__bounceIn"
                        :class="{ 'flex_column': isShow }">
                        <li v-for="(item2, index2) in item.children" :key="index2">
                            <router-link :to="item2.href">{{ item2.title }}</router-link>
                            <div class="flex_column_div" v-if="isShow">
                                <div v-for="(item3, index3) in item2.children" :key="index3">
                                    <router-link :to="item3.href">{{ item3.title }}</router-link>
                                </div>
                            </div>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
interface NavItem {
    title: string,
    href: string,
    children?: Array<{ title: string, href: string, children?: Array<{ title: string, href: string }> }>
}
let isShow = ref(false);
const navList = ref<NavItem[]>([
    {
        title: "首页",
        href: "/",
    },
    {
        title: "关于IIFA",
        href: "",
        children: [
            {
                title: "IIFA全球",
                href: "/international"
            }, {
                title: "IIFA中国",
                href: "/chinese"
            }
        ]
    },
    {
        title: "职业认证",
        href: "",
        children: [
            {
                title: "CIFA认证",
                href: "",
                children: [
                    { title: "认证概述", href: "/cifa" },
                    { title: '考试管理', href: '/cifaExam' }
                ]
            },
            {
                title: 'CWA认证',
                href: '',
                children: [
                    { title: "认证概述", href: "/cwa" },
                    { title: '考试管理', href: '/cwaExam' }
                ]
            }
        ]
    },
    {
        title: "活动与研究",
        href: "",
        children: [
            { title: "活动中心", href: "/news" },
            { title: '研究发布', href: '/study' }
        ]
    },
    {
        title: "加入我们",
        href: "/work",
        children: []
    }
]);
let hoverClass = ref<NavItem | null>(null);
const handleMouseOver = (item: NavItem) => {
    hoverClass.value = item;
    if (item.title == "职业认证") {
        isShow.value = true;
    } else {
        isShow.value = false;
    }
    //
};

const handleMouseOut = () => {
    hoverClass.value = null;
};
</script>
<style scoped lang='less'>
.flex_column {
    flex-direction: column;

    li {
        padding: 10px !important;
    }
}

.flex_column_div {
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    position: relative;
    margin-top: 5px;

    &::after {
        content: "";
        right: 50%;
        top: 50%;
        margin-top: -10px;
        height: 20px;
        position: absolute;
        background: #abddc7;
        width: 1px;
    }
}

.menu {
    width: 100%;
    height: 170px;
    box-sizing: border-box;
    background-color: #ffffff;

    .menu-content {
        width: 1300px;
        height: 100%;
        display: flex;
        margin: 0 auto;
        justify-content: space-between;
        align-items: center;

        >img {
            width: 290px;
            height: 71px;
        }

        >ul {
            .aaaa ul {
                width: 180% !important;
            }

            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            li {
                list-style: none;
                padding: 20px;
                color: #003768;
                position: relative;
                cursor: pointer;
                font-size: 20px;

                &:not(:last-child)::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 50%;
                    margin-top: -10px;
                    height: 20px;
                    position: absolute;
                    background: #abddc7;
                    width: 1px;
                }

                >ul {
                    position: absolute;
                    top: 70px;
                    left: -50%;
                    z-index: 10;
                    display: flex;
                    width: 200%;
                    background: #4d917b4a;

                    &::before {
                        content: "";
                        border-top: 20px solid #cbdfd900;
                        border-bottom: 20px solid #cbdfd9;
                        border-left: 20px solid #ffe4c400;
                        border-right: 20px solid #d2691e00;
                        position: absolute;
                        left: calc(50% - 20px);
                        top: -39px;
                    }
                }
            }

        }
    }
}

a {
    text-decoration: none;
}
</style>
